<template>
    <div>
        <el-container>
            
            
                <el-header class="md-header">
                    <!-- 商品增加 开始 -->
                    <div style="text-align: left">
                        <div style="text-align: left">
                            <el-form :inline="true" class="query-form" size="mini">
                                <el-form-item class="query-form-item">
                                    <el-input  placeholder="广告名称"></el-input>
                                </el-form-item>
                                <el-form-item class="query-form-item">
                                    <el-select  placeholder="状态">
                                        <el-option label="全部" value=""></el-option>
                                        <el-option label="禁用" value="0"></el-option>
                                        <el-option label="正常" value="1"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item>
                                    <el-button-group>
                                        <el-button type="danger" plain icon="el-icon-refresh" ></el-button>
                                        <el-button type="danger" plain icon="search" >查询</el-button>
                                        <el-button type="danger" plain @click="dialogAddAdv=true">新增</el-button>
                                    </el-button-group>
                                </el-form-item>
                            </el-form>
                            
                            
                        </div>

                        <el-dialog title="添加广告" :visible.sync="dialogAddAdv">
                        <el-form :model="form">
                            <el-form-item label="标题" :label-width="formLabelWidth">
                                <el-input v-model="form.name" autocomplete="off"></el-input>
                            </el-form-item>
                            
                            <el-form-item label="链接" :label-width="formLabelWidth">
                                <el-input v-model="form.url" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="广告图片" :label-width="formLabelWidth">
                                <el-upload class="upload-demo" >
                                    <el-button type="danger" plain>点击上传</el-button>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="广告内容" :label-width="formLabelWidth">
                                <mavon-editor style="min-height: 400px" />
                            </el-form-item>
                            <el-form-item label="广告分类" :label-width="formLabelWidth">
                                <el-select v-model="form.region" placeholder="请选择活动区域">
                                    <el-option label="轮播图" value="1"></el-option>
                                    <el-option label="快讯" value="2"></el-option>
                                    <el-option label="banner" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="状态" :label-width="formLabelWidth">
                                <el-radio v-model="value" label="1" value="1">正常</el-radio>
                                <el-radio v-model="value" label="2" value="2">禁用</el-radio>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogAddAdv = false">取 消</el-button>
                            <el-button type="danger" plain @click="dialogAddAdv = false">确 定</el-button>
                        </div>
                        </el-dialog>
                        
                    </div>
                    <!-- 商品增加结束 -->
                </el-header>
                <el-main>
                    <!-- 商品展示 -->
                     <el-table
                        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%">
                        <el-table-column
                            label="编号"
                            prop="code">
                        </el-table-column>
                        <el-table-column
                            label="标题"
                            prop="name">
                        </el-table-column>
                        <el-table-column
                            label="内容"
                            prop="text">
                        </el-table-column>
                        <el-table-column
                            label="图片"
                        >
                        <template  slot-scope="scope">
                            <el-image
                                style="width: 100px; height: 100px"
                                :src="scope.row.url"
                                ></el-image>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="状态"
                        prop="status">
                        </el-table-column>
                        <el-table-column
                        align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </el-main>
                <el-footer>
                    <!-- 分页 -->
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100">
                    </el-pagination>
                </el-footer>
            
        </el-container>
    </div>
       
</template>

<script>
import { mavonEditor } from 'mavon-editor'
// 引入编辑器样式 
import 'mavon-editor/dist/css/index.css'
export default {
    components: {
        mavonEditor
    },
    data() {
        return {
           value: 1,
            // 商品列表
            tableData: [
                {
                    code: '001001',
                    name: '轮播图第一期',
                    text: '首页轮播图展示--华为P40',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    status: '正常'
                },
                {
                    code: '001002',
                    name: '轮播图第一期',
                    text: '首页轮播图展示--特轮苏',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    status: '正常'
                }, 
                {
                    code: '001003',
                    name: '轮播图第一期',
                    text: '首页轮播图展示--华为Meta30',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    status: '正常'
                },
                {
                    code: '001004',
                    name: '轮播图第一期',
                    text: '首页轮播图展示--苹果12',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    status: '正常'
                }
            ],
            search: '',  // 搜索
            currentPage: 1,
            // 增加品牌
            dialogBrand: false,
            // 增加商品
            
            dialogAddAdv: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px'
        } 
    },
    methods: {
        // 树形控件
        handleNodeClick(data) {
            console.log(data);
        },
        // 表格当中的修改和删除
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        // 分页的方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            
        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>
